<template>
  <div class="color-select">
    <pro-icons
      name="i-platte"
      :theme="platteTheme"
      :size="size"
      :fill="platteFill"
      v-bind="$attrs"
      @click="modelShow = true"
    />
  </div>
  <n-modal v-model:show="modelShow">
    <div class="color-select-dialog">
      <div class="color-select-dialog_title">主题色选择</div>
      <div class="color-select-dialog_main">
        <div
          class="color-select-dialog_item"
          v-for="item in colorList"
          :key="item.color"
          @click="changeColor(item.color)"
        >
          <div class="item-preview" :style="{ background: item.color }"></div>
          <div class="item-title">
            <span class="item-title-cn" :style="{ color: item.color }">{{
              item.cnName
            }}</span>
            <span class="item-title-en">{{ item.enName }}</span>
          </div>
          <div class="item-color">
            <span class="item-color-16">{{ item.color }}</span>
            <span class="item-color-rgb">{{ item.colorRgb }}</span>
          </div>
        </div>
      </div>
    </div>
  </n-modal>
</template>

<script lang="ts" setup>
  import { toRefs } from 'vue'
  import { useTheme } from '@/store/modules/theme'
  import { darkMode } from '~/types/theme'
  import config from '@/config'
  import { useMsg } from '@/hooks'
  const { colorList } = config
  const theme = useTheme()
  const modelShow = ref(false)

  const props = defineProps({
    size: {
      type: String || Number,
      default: '16'
    }
  })
  const { size } = toRefs(props)

  const platteTheme = computed(() =>
    theme.darkMode == darkMode.DARK ? 'outline' : 'filled'
  )
  const platteFill = computed(() =>
    theme.darkMode == darkMode.DARK ? '#fff' : '#333'
  )
  function changeColor(color: string) {
    theme.setPrimary(color)
    useMsg('success', '主题色切换成功')
    modelShow.value = false
  }

  defineExpose({
    handleClick: () => {
      modelShow.value = true
    }
  })
</script>

<style lang="less" scoped>
  [data-theme='dark'] {
    .color-select:hover {
      background: @border-color-dark;
    }
  }
  .color-select {
    height: @page-header-height;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
      background: @background-gray;
    }
  }
  .color-select-dialog {
    .blur-bg();
    width: 836px;
    height: 400px;
    background: rgba(240, 240, 240, 0.7);
    border-radius: 8px;
    &_title {
      padding: 10px;
      font-size: 18px;
      color: #333;
    }
    &_main {
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
    }
    &_item {
      position: relative;
      margin: 0 5px;
      margin-bottom: 10px;
      padding: 10px 20px;
      width: 220px;
      height: 46px;
      border-radius: 5px;
      cursor: pointer;
      border: 1px solid rgba(0, 0, 0, 0);
      backdrop-filter: blur(20px);
      box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
      .item-preview {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 8px;
        height: 42px;
        border-radius: 2px;
      }
      .item-title,
      .item-color {
        span {
          padding: 0 10px 0 4px;
        }
      }
      .item-title {
        margin-bottom: 4px;
        .item-title-en {
          font-size: 12px;
        }
      }
    }
  }
</style>
